<template>
  <div class="app-container">
    <div class="line1">
      <el-row :gutter="20">
        <el-tabs
          v-model="managerSystemListID"
          @tab-click="toGetManageList"
          type="card"
        >
          <el-tab-pane
            v-for="item in managerSystemList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
          </el-tab-pane>
        </el-tabs>
        <el-col span="1.5">
          <pagination
            style="margin-top: -0.5px"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
            layout="prev,  next"
          />
        </el-col>
      </el-row>
    </div>
    <div class="line2">
      <div class="column1">
        <el-input
          v-model="searchName"
          placeholder="请输入名称"
          clearable
          prefix-icon="Search"
          style="margin-top: 2vh; width: 95%"
        />
        <el-tree
          :data="managementSceneList"
          :props="{ label: 'name', children: 'children' }"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="treeRef"
          node-key="id"
          highlight-current
          default-expand-all
          :current-node-key="managementSceneListID"
          @node-click="handleToView"
          style="margin-top: 20px;width: 95%"
        >
        </el-tree>
        <pagination
          v-show="totalSence > 0"
          :total="totalSence"
          v-model:page="queryParamsSence.pageNum"
          v-model:limit="queryParamsSence.pageSize"
          @pagination="getListSence"
          layout="prev,  next"
          style="margin-right: 10px;"
        />
      </div>
      <div class="column2">
        <mt-preview ref="MtPreviewRef"></mt-preview>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.line1 {
  width: 100%;
  height: 10%;
}
.line2 {
  margin-top: 5px;
  width: 100%;
  height: 77vh;
  position: relative;
  display: flex;
  .column1 {
    border-width: 1px;
    border-top-style: solid;
    position: relative;
    height: 100%;
    width: 15%;
  }
  .column2 {
    border: 1px, solid;
    position: relative;
    height: 100%;
    width: 85%;
  }
}

/* 列表展示 */
.image {
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.toolbar {
  display: flex;
  margin-left: auto;
  margin-right: 5px;
}
</style>
<script setup name="ManagerSystem">
/** 根据名称筛选树 */
const searchName = ref("");
import { watch } from "vue";
watch(searchName, (val) => {
  proxy.$refs["treeRef"].filter(val);
});
/** 通过条件过滤前置条件  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
};
import { emptyIsFalse } from "@/api/123wwwww/universalMethod";
function handleToView(item) {
  if (emptyIsFalse(item.dataModel)) {
    MtPreviewRef.value?.setImportJson(JSON.parse(item.dataModel));
  } else {
    // 如果之前没存过数据 那么就传初始化数据 这样可以自己设置画布大小等配置
    MtPreviewRef.value?.setImportJson({
      canvasCfg: {
        width: 1920,
        height: 1080,
        scale: 1,
        color: "",
        img: "",
        guide: true,
        adsorp: true,
        adsorp_diff: 3,
        transform_origin: {
          x: 0,
          y: 0,
        },
        drag_offset: {
          x: 0,
          y: 0,
        },
      },
      gridCfg: {
        enabled: true,
        align: true,
        size: 10,
      },
      json: [],
    });
  }
}

import { MtPreview } from "maotu";
import "maotu/dist/style.css";
const MtPreviewRef = ref();

function toGetManageList(entity) {
  MtPreviewRef.value?.setImportJson({
    canvasCfg: {
      width: 1920,
      height: 1080,
      scale: 1,
      color: "",
      img: "",
      guide: true,
      adsorp: true,
      adsorp_diff: 3,
      transform_origin: {
        x: 0,
        y: 0,
      },
      drag_offset: {
        x: 0,
        y: 0,
      },
    },
    gridCfg: {
      enabled: true,
      align: true,
      size: 10,
    },
    json: [],
  });
  let id = entity.props.name;
  let item = {};
  queryParamsSence.value.sId = id;
  getListSence();
}

const queryParamsSence = ref({
  pageNum: 1,
  pageSize: 15,
  sId: null,
});
const loadingSence = ref(false);
const managementSceneList = ref([]);
const totalSence = ref(0);
/** 查询场景管理列表 */
const managementSceneListID = ref(0);
import { listManagementScene } from "@/api/ruoyi-device/managementScene";
function getListSence() {
  loadingSence.value = true;
  listManagementScene(queryParamsSence.value).then((response) => {
    managementSceneList.value = response.rows;
    totalSence.value = response.total;
    managementSceneListID.value = 0;
    if (totalSence.value > 0) {
      if (emptyIsFalse(managementSceneList.value[0].id)) {
        managementSceneListID.value = managementSceneList.value[0].id;
        console.log(managementSceneListID.value);
        proxy.$refs["treeRef"].setCurrentKey(managementSceneListID.value);
        MtPreviewRef.value?.setImportJson(
          JSON.parse(managementSceneList.value[0].dataModel)
        );
      }
    }
    loadingSence.value = false;
  });
}

import { useRouter } from "vue-router";
const router = useRouter();

import { listManagerSystem } from "@/api/ruoyi-device/managerSystem";

const { proxy } = getCurrentInstance();

const managerSystemList = ref([]);
const loading = ref(true);
const total = ref(0);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 14,
    name: null,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

const managerSystemListID = ref(0);
/** 查询子系统管理列表 */
function getList() {
  loading.value = true;
  listManagerSystem(queryParams.value).then((response) => {
    managerSystemList.value = response.rows.filter((item) => item.state == 0);
    total.value = response.total;
    loading.value = false;
    if (total.value > 0) {
      queryParamsSence.value.sId = managerSystemList.value[0].id;
      managerSystemListID.value = managerSystemList.value[0].id;
      getListSence();
    }
  });
}

getList();
</script>
